<template>
  <div>
    <div class="userInfo" @click="closePage">
        <div class="info-my">
            <div class="info-my-box">
                <span class="item-pic">
                    <img class="item-left-img" src="../../assets/images/search_active.png" alt="">
                </span>
                <div class="item-name">您 &nbsp;
                    <i class="fa fa-angle-double-right" aria-hidden="true" @click="judgeLogin"></i>
                </div>
                <span class="item-right">
                    <i class="fa fa-qrcode" aria-hidden="true"></i> 
                </span>
            </div>
        </div>
        <!-- 1 -->
        <div class="info-item">
            <div class="info-item-box">
                <span class="item-left">
                    <i class="fa fa-envelope-open-o" aria-hidden="true"></i>
                </span>
                <div class="item-title">我的消息</div>
                <span class="item-right">
                    <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                </span>
            </div>
            <div class="info-item-box">
                <span class="item-left">
                    <i class="fa fa-headphones" aria-hidden="true"></i>
                </span>
                <div class="item-title">边听边存</div>
                <span class="item-right">
                    <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                </span>
            </div>
            <div class="info-item-box">
                <span class="item-left">
                    <i class="fa fa-ban" aria-hidden="true"></i>
                </span>
                <div class="item-title">音乐黑名单</div>
                <span class="item-right">
                    <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                </span>
            </div>
            
        </div>
        <!-- 2 -->
        <div class="info-item">
            <div class="info-item-box">
                <span class="item-left">
                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                </span>
                <div class="item-title">个性装扮</div>
                <span class="item-right">
                    <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                </span>
            </div>
            <div class="info-item-box">
                <span class="item-left">
                    <i class="fa fa-bell" aria-hidden="true"></i>
                </span>
                <div class="item-title">音乐闹钟</div>
                <span class="item-right">
                    <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                </span>
            </div>
            <div class="info-item-box">
                <span class="item-left">
                    <i class="fa fa-expeditedssl" aria-hidden="true"></i>
                </span>
                <div class="item-title">青少年模式</div>
                <span class="item-right">
                    <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                </span>
            </div>
            
        </div>
        <!-- 3 -->
        <div class="info-item">
            <div class="info-item-box">
                <span class="item-left">
                   <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </span>
                <div class="item-title">我的订单</div>
                <span class="item-right">
                    <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                </span>
            </div>
            <div class="info-item-box">
                <span class="item-left">
                    <i class="fa fa-whatsapp" aria-hidden="true"></i>
                </span>
                <div class="item-title">我的客服</div>
                <span class="item-right">
                    <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                </span>
            </div>
            <div class="info-item-box">
                <span class="item-left">
                    <i class="fa fa-cog" aria-hidden="true"></i>
                </span>
                <div class="item-title">我的设置</div>
                <span class="item-right">
                    <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                </span>
            </div>
            
        </div>
    </div>      
  </div>
</template>

<script>
//消息通知
export default {
    name:'Personal',
    data() {
        return {
           
        }
    },
    methods: {
        closePage() {
            this.$emit('nav-page');
        },  
        judgeLogin() {
            let login =window.localStorage.getItem('login');
            if(!login) {
                this.$router.push({name: 'Login'});
            }else{
                this.$router.push({path:'/userInfo'});
            }
        }
        
    }
   
}
</script>

<style lang="less" scoped>
.userInfo{
    width:85%;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(90,94,111,0.9);
    color:#fff;
}
.info-my {
    font-size:16px;
    padding: 0 10px;
    margin-bottom: 20px;
    .info-my-box{
        display: flex;
        padding:10px 10px;
        align-items: center;
        .item-pic{
            width:35px;
            height:35px;
            margin-right: 10px;
            .item-left-img{
                width:100%;
                display: block;
            }
        }
        .item-name{
            flex:1;
            text-align:left;
        }
        .item-right{
            width:30px;
            font-size:18px;
        }
    }
}
.info-item{
    font-size:16px;
    padding: 0 10px;
    // background-color:#E0E0E0 ;
    background-color: rgba(200,200,200,.8);
    margin: 0 10px;
    border-radius:10px;
    margin-bottom: 20px;
    .info-item-box{
        display: flex;
        padding:10px 10px;
        align-items: center;
        border-bottom:1px solid #C2BFC2;
        .item-left{
            width:50px;
            font-size:18px;
            
        }
        .item-right{
            width:30px;
            font-size:18px;
        }
        .item-title{
            flex:1;
            text-align:left;
        }
    }
}

</style>